import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'dva';
import styles from './IndexPage.less';
import { PullToRefresh, NavBar, Icon, ActivityIndicator } from 'antd-mobile';
import { routerRedux } from 'dva/router';

class IndexPage extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const { home, dispatch } = this.props;
    const { height } = home;
    // height = height- ReactDOM.findDOMNode(this.ptr).offsetTop
    dispatch({ type: 'home/changeHeight', payload: { height } });
  }
  onClose = () =>{
    window.ns.runtime.closePage()
  }
  render() {
    const { home, dispatch } = this.props;
    const { height, down, data, loading } = home;
    return (
      <div className={styles.flex}>
        <NavBar mode="dark" leftContent={[<span style={{fontSize:14}} onClick={e=> this.onClose()}>关闭</span>]}
        >待办</NavBar>
        <PullToRefresh
          ref={el => (this.ptr = el)}
          style={{
            overflowX: 'hidden',
            overflowY: 'auto',
          }}
          indicator={down ? {} : { deactivate: '上拉可以刷新' }}
          direction={down ? 'down' : 'up'}
          onRefresh={() => {
            setTimeout(() => {
              dispatch({ type: 'index/query' });
            }, 1000);
          }}
        >
          {data.map(item => (
            <div key={item.fldUnid} className={styles.item} onClick={e => this.ItemClick(e, item)}>
              <span>{item.fldSubject}</span>
              <div className={styles.sub}>
                <img src={require('../assets/person.png')} />
                <span>{item.fldtype}</span>
                <img src={require('../assets/eye.png')} />
                <span>{item.stat}</span>
                <span style={{ paddingLeft: 10 }}>{item.reavcetime}</span>
              </div>
            </div>
          ))}
        </PullToRefresh>
        <ActivityIndicator toast text="加载中..." animating={loading} />
      </div>
    );
  }
  ItemClick = (e, item) => {
    const { dispatch } = this.props;
    dispatch(
      routerRedux.push({
        pathname: '/detail',
        query: { item },
      }),
    );
  };
}
IndexPage.propTypes = {};
// home对应models下的nameSpace
export default connect(home => home)(IndexPage);
